<template>
  <div class="mod-config">
    <basic-container>
    <div class="boxsty zhiBiao">
      <div class="tabletext mb10">奖金分配</div>
      <div style="height: 50px; border-bottom: 1px solid #b0bde2">
        <el-button type="primary">机构分配</el-button>
        <el-button type="primary" @click="btnCreate">员工分配</el-button>
      </div>
      <div class="mt10">
        奖金名称：<el-input v-model="jjmc" placeholder="请输入奖金名称" style="width: 200px"></el-input>
        奖金发放周期：<el-input v-model="jjffzq" placeholder="请输入奖金发放周期" style="width: 200px"></el-input>
        奖金类别：
        <el-radio v-model="radio" label="1">员工</el-radio>
        <el-radio v-model="radio" label="2">机构</el-radio>
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="mt10">
        <span>4季度季度奖<span class="font18 red">150,000</span>元，10月份总经理嘉奖<span class="font18 red">20,000</span>元，10月份业绩嘉奖<span class="font18 red">50,000</span>元</span>
        <el-button type="primary" @click="btnCreate" plain style="margin-left:10px;">详情</el-button>
      </div>
      <div class="mt10">
        <el-table :data="tableData" style="width: 100%" height="60vh">
          <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
          <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>

          <el-table-column prop="jjlx" label="奖金类别" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="jjmc" label="奖金名称" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="ffdx" label="发放对象" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="ffzq" label="发放周期" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="ze" label="总额(元)" min-width="120" header-align="center" align="center"></el-table-column>
          <el-table-column prop="ffzt" label="发放状态" min-width="120" header-align="center" align="center"></el-table-column>

          <el-table-column label="操作" width="120" header-align="center" align="center">
            <template slot-scope="scope"><el-button type="primary">编辑</el-button></template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    </basic-container>
    <table-form ref="openPanels"></table-form>
  </div>
</template>

<script>
import TableForm from './jiangjinjjzjpzb-form'

export default {
  data() {
    return {
      jjmc:"",
      jjffzq:"",
      radio: '2',
      tableData:[
        {
          jjlx:"日常",
          jjmc:"4季度季度奖",
          ffdx:"吉林业务部",
          ffzq:"4季度",
          ze:"150,000",
          ffzt:"未发放",
        },
        {
          jjlx:"年度",
          jjmc:"10月份总经理嘉奖",
          ffdx:"吉林业务部",
          ffzq:"10月份",
          ze:"20,000",
          ffzt:"已发放",
        },
        {
          jjlx:"日常",
          jjmc:"10月份业绩嘉奖",
          ffdx:"吉林业务部",
          ffzq:"10月份",
          ze:"50,000",
          ffzt:"未发放",
        },
      ]
    }
  },
  components: {
    TableForm
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    // 获取数据列表
    getDataList() {

    },
    btnCreate() {
      this.$nextTick(() => {
        this.$refs.openPanels.initCreate()
      })
    },
  }
}

</script>
